<!-- 菜单组件 -->
<template>
    <Menu :active-name="routerActive" width="auto" :open-names="['1']" class="my_menu">
        <template v-for="item in menuList">
            <MyItem :item="item" />
        </template>
    </Menu>
</template>

<script>
export default {
    name: 'MyMenu',
};
</script>
<script setup>
import MyItem from '@/pages/menu/Item.vue';
import { useRouter } from 'vue-router'
import { ref, watch, reactive } from 'vue'

const router = useRouter();

const activeArr = reactive([])

defineProps({
    menuList: Array
});

const routerActive = ref('');
routerActive.value = router.currentRoute.value.path;

watch(
    () => router.currentRoute.value,
    (val) => {
        routerActive.value = val.path
    }
)

</script>

<style scoped lang="scss">
.my_menu {
    height: calc(100vh - 48px);
    overflow-y: auto;
    &::-webkit-scrollbar {
        /* 对应纵向滚动条的宽度 */
        width: 3px;
        /* 对应横向滚动条的宽度 */
        height: 10px;
    }

    /* 滚动条上的滚动滑块 */
    &::-webkit-scrollbar-thumb {
        background-color: #2DB7F5;
        // border-radius: 32px;
    }

    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
        background-color: #f5f5f5;
        // border-radius: 32px;
    }
    
}
</style>